<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>SlickGrid example 13: Indexed Sorting using Functional Data Provider</title>
        <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
        <style>
            html,body { margin:0; padding:0; background-color:White; overflow:auto; }
            body { font:11px Helvetica,Arial,sans-serif; }
            #container { position:absolute; top:0; left:0; right:0; bottom:0; }
            #description { position:fixed; top:30px; right:30px; width:25em; background-color:beige; border:solid 1px gray; z-index:1000; }
            #description h2 { padding-left:0.5em; }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <div id="description">
            <h2>Demonstrates:</h2>
            <ul>
                <li>Sorting grid items by an index</li>
                <li>Using the getItem method to provide data</li>
            </ul>
        </div>

        <script src="../lib/jquery-1.4.3.min.js"></script>
        <script src="../lib/jquery.event.drag-2.0.min.js"></script>
        <script src="../slick.core.js"></script>
        <script src="../slick.grid.js"></script>

        <script>
            var grid,
                data = [],
                columns = [
                    { id: "title", name: "Title", field: "title", width: 240, sortable: true },
                    { id: "c1", name: "Sort 1", field: "c1", width: 240, sortable: true },
                    { id: "c2", name: "Sort 2", field: "c2", width: 240, sortable: true },
                    { id: "c3", name: "Sort 3", field: "c3", width: 240, sortable: true }
                ],
                options = {
                    enableCellNavigation: false,
                    enableColumnReorder: false
                }, numberOfItems = 25000, items = [], indices, isAsc = true, currentSortCol = { id: "title" }, i;


            function randomize(items) {
                /// <summary>
                /// Copies and shuffles the specified array and returns a new shuffled array.
                /// </summary>
                var randomItems = $.extend(true, null, items), randomIndex, temp, index;
                for (index = items.length; index-- > 0;) {
                    randomIndex = Math.round(Math.random() * items.length - 1);
                    if (randomIndex > -1) {
                        temp = randomItems[randomIndex];
                        randomItems[randomIndex] = randomItems[index];
                        randomItems[index] = temp;
                    }
                }
                return randomItems;
            }

            /// Build the items and indices.
            for (i = numberOfItems; i-- > 0;) {
                items[i] = i;
                data[i] = {
                    title: "Task ".concat(i + 1)
                };
            }
            indices = { title: items, c1: randomize(items), c2: randomize(items), c3: randomize(items) };

            // Assign values to the data.
            for (i = numberOfItems; i-- > 0;) {
                data[indices.c1[i]].c1 = "Value ".concat(i + 1);
                data[indices.c2[i]].c2 = "Value ".concat(i + 1);
                data[indices.c3[i]].c3 = "Value ".concat(i + 1);
            }

            // Define function used to get the data and sort it.
            function getItem(index) {
                return isAsc ? data[indices[currentSortCol.id][index]] : data[indices[currentSortCol.id][(data.length - 1) - index]];
            }
            function getLength() {
                return data.length;
            }

            grid = new Slick.Grid("#container", {getLength: getLength, getItem: getItem}, columns, options);
            grid.onSort.subscribe(function(e,args) {
                currentSortCol = args.sortCol;
                isAsc = args.sortAsc;
                grid.invalidateAllRows();
                grid.render();
            });
        </script>

    </body>
</html>